<template>
    <div class="dormitory-room" ref="room">
        <div class="dormitory-building-tree">
            <el-tree
                    default-expand-all
                    :expand-on-click-node="false"
                    @node-click="listRoomByBuildingId"
                    :data="buildingList">
            </el-tree>
        </div>
        <div class="dormitory-room-table">
            <el-form :inline="true" size="mini" :model="searchForm">
                <el-form-item label="名称">
                    <el-input v-model="searchForm.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="编码">
                    <el-input v-model="searchForm.code" placeholder="编码"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="searchForm.status" placeholder="状态"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button type="primary" @click="handleReset">重置</el-button>
                    <el-button type="primary" @click="handleRefresh">刷新</el-button>
                    <el-button type="primary" @click="handleCreate">新建</el-button>
                </el-form-item>
            </el-form>
            <div>
                <el-table
                        :data="tableData"
                        style="width: 100%; margin-bottom: 20px; padding: 0px;"
                        row-key="ukId"
                        border
                        stripe
                        default-expand-all
                        size="mini">
                    <el-table-column
                            prop="name"
                            label="名称"
                            width="220"
                            min-width="100">
                    </el-table-column>
                    <el-table-column
                            prop="code"
                            label="编码"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            label="几人间"
                            width="100">
                        <template slot-scope="scope">
                            <span>{{scope.row.buildingType}}人间</span>
                            <span v-if="scope.row.count == 0">(剩余{{scope.row.buildingType-scope.row.count}})</span>
                            <a href="#" v-if="scope.row.count > 0" @click="showRoomUser(scope.row.ukId)">(已住{{scope.row.count}})</a>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="60">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == '1'" type="success" size="mini">启用</el-tag>
                            <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">停用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            header-align="left"
                            align="center"
                            prop="sort"
                            label="排序"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="gmtCreate"
                            label="创建时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="gmtModified"
                            label="修改时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="150">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)"
                                    type="primary"
                                    plain>编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    @click="handleDelete(scope.$index, scope.row)"
                                    type="danger">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <dormitory-pagination :parentMethod="listRoom"
                                      :pagination="this.$store.state.Navigation.pagination"></dormitory-pagination>
            </div>
            <el-dialog title="房间管理" :visible.sync="dialogFormVisible" :close-on-click-modal="false" label-width="80px">
                <el-form ref="form" :model="roomForm" label-width="150px">
                    <el-form-item label="所属宿舍楼">
                        <template>
                            <el-select v-model="roomForm.buildingId" filterable placeholder="请选择">
                                <el-option
                                        v-for="item in buildingList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="所属区域">
                        <el-input v-model="roomForm.area"></el-input>
                    </el-form-item>
                    <el-form-item label="开始楼层">
                        <el-input v-model="roomForm.startLayer" type="number" min="1" max="99"></el-input>
                    </el-form-item>
                    <el-form-item label="层数">
                        <el-input v-model="roomForm.layer" type="number" min="1" max="99"></el-input>
                    </el-form-item>
                    <el-form-item label="开始房间号">
                        <el-input v-model="roomForm.startNumber" type="number" min="1" max="99"></el-input>
                    </el-form-item>
                    <el-form-item label="每层房间数">
                        <el-input v-model="roomForm.count" type="number" min="1" max="20"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="roomForm.status" placeholder="请选择状态">
                            <el-option label="启用" :value="1"></el-option>
                            <el-option label="停用" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="roomForm.sort" type="number" min="0" max="90000"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSave">保存</el-button>
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog title="房间用户列表" :visible.sync="roomUserVisible">
                    <el-table
                            :data="roomUserList"
                            style="width: 100%">
                    <el-table-column
                            prop="account"
                            label="账号"
                            width="*">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户名"
                            width="*"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            label="角色"
                            width="*">
                        <template slot-scope="scope">
                        <span v-if="scope.row.roles != null" v-for="(item, index) in scope.row.roles" :key="index">
                          {{ item.name }},
                        </span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>

<script>

    import PageSizeUtils from "../../../../utils/PageSizeUtils";
    import DateFormatUtils from "../../../../utils/DateFormatUtils";
    import DormitoryPagination from "../../components/DormitoryPagination";
    import {deleteRoom, listRoom, saveRoom, batchCreateRoom, listRoomByBuildingId} from "../../../../api/manage/room";
    import {listBuilding} from "../../../../api/manage/building";
    import {listUserByRoomId} from "../../../../api/platform/user";

    export default {
        name: "Room",
        components: {DormitoryPagination},
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                roomUserVisible: false,
                roomUserList: [],
                buildingList: [],
                searchForm: {
                    name: "",
                    code: "",
                    status: "",
                },
                roomForm: {
                    buildingId: "",
                    area: "",
                    startLayer: 1,
                    layer: "",
                    startNumber: 1,
                    count: "",
                    waterRate: "",
                    powerRate: "",
                    status: 1,
                    sort: 10000,
                },

            };
        },
        methods: {
            listRoom(current, size) {
                listRoom(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.rooms.records;
                    PageSizeUtils.setPagination(response.data.rooms)
                }).catch(error => {
                    console.log(error)
                })
            },
            listBuilding() {
                listBuilding().then(response => {
                    let buildings = new Array();
                    buildings = response.data.buildings.records;
                    for (let index in buildings) {
                        this.buildingList.push({
                            label: buildings[index].name + "__" + (buildings[index].gender == 0 ? "女" : "男"),
                            value: buildings[index].ukId,
                            key: buildings[index].ukId,
                        })
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {
                this.roomForm = {}
                this.dialogFormVisible = true;
            },
            handleEdit(index, row) {
                this.roomForm = row
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                deleteRoom(row.ukId).then(response => {
                    this.listRoom(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                this.listRoom(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleRefresh() {
                this.listRoom(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleReset() {
                this.searchForm = {}
            },
            handleSave() {
                batchCreateRoom(this.roomForm).then(response => {
                    this.listRoom(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                    this.dialogFormVisible = false;
                }).catch(error => {
                    console.log(error)
                })
            },
            listRoomByBuildingId(data, checked, indeterminate) {
                listRoomByBuildingId(data.value).then(response => {
                    this.tableData = response.data.rooms
                })
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            },
            showRoomUser(roomId) {
                listUserByRoomId(roomId).then(response => {
                    this.roomUserList = response.data.users
                    this.roomUserVisible = true
                })
            }
        },
        created() {
            PageSizeUtils.setPagination({})
            this.listRoom(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size);
            this.listBuilding();
        },
    }
</script>

<style scoped>
    .dormitory-room {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border: #ffffff 3px solid;
    }

    .dormitory-building-tree {
        width: 200px;
        height: calc(100% - 61px);
        border-right: #cccccc 1px solid;
        float: left;
    }

    .dormitory-room-table {
        width: calc(100% - 221px);
        height: calc(100% - 61px);
        float: left;
    }
</style>
